<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
                ul{list-style:none;}
                li{
                    display:inline-block;
                    width:100px;
                    height:100px;
                    background:pink;
                    margin:5px;
                }
                
                @media all and (min-width:1px) and (max-width:400px){
                    h3{color:green;}
                    h3:after{content:'---最小了';}
                    li{background:green;}
                    
                }
                
                @media all and (min-width:401px) and (max-width:600px){
                    h3{color:red;}
                    h3:after{content:'---大点';}
                    li{background:red;}
                }
                
                @media all and (min-width:601px) and (max-width:900px){
                    h3{color:blue;}
                    h3:after{content:'---行';}
                    li{background:blue;}
                }
                
                @media all and (min-width:901px) and (max-width:1200px){
                    h3{color:yellow;}
                    h3:after{content:'---够大了';}
                     li{background:pink;}
                }
        </style>
    </head>
    <body>
        <h3>CSS实例:媒体查询属性</h3>
        <div class="dlist">
                <ul>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                </ul>
        </div>
    </body>
</html>